<template>
  <div class="right-card">
    <m-card title="最近地震事件">
      <el-table
        :data="tableData"
        style="width: 100%; height: 100%"
        :header-cell-style="{ background: 'transparent' }"
      >
      <el-table-column label="参考位置" width="auto">
         <template #default="scope">
            <!-- <a :href="'./#/earthquake?eq_id=' + scope.row.id" target="_blank"> -->
              {{ scope.row.location }}
            <!-- </a> -->
          </template>
        </el-table-column>
        <el-table-column prop="magnitude" label="震级" width="auto">
          <template #default="scope">
            <el-tag  :type="tagType(scope.row.magnitude)"  effect="dark">{{ scope.row.magnitude }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="origin_time" label="时间" width="auto" />
        <el-table-column prop="depth" label="震源深度" width="auto" />
      </el-table>
    </m-card>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue";
import * as echarts from "echarts";
import mCard from "@/components/mCard/index.vue";
import VChart from "vue-echarts";
const tableData = reactive([
  {
    id: 17335,
    location: "西藏昌都市洛隆县",
    magnitude: 3.0,
    origin_time: "2025-07-21 05:15:25",
    depth: 10.0,
  },
  {
    id: 17334,
    location: "新疆阿克苏地区沙雅县",
    magnitude: 3.1,
    origin_time: "2025-07-20 22:57:13",
    depth: 10.0,
  },
  {
    id: 17327,
    location: "西藏那曲市双湖县",
    magnitude: 3.8,
    origin_time: "2025-07-19 19:53:18",
    depth: 10.0,
  },
  {
    id: 17326,
    location: "新疆阿克苏地区库车市",
    magnitude: 3.2,
    origin_time: "2025-07-18 17:13:04",
    depth: 18.0,
  },
  {
    id: 17325,
    location: "新疆阿克苏地区拜城县",
    magnitude: 3.0,
    origin_time: "2025-07-18 16:16:57",
    depth: 12.0,
  },
  {
    id: 17321,
    location: "四川甘孜州雅江县",
    magnitude: 3.2,
    origin_time: "2025-07-15 22:47:25",
    depth: 10.0,
  },
  {
    id: 17317,
    location: "云南昭通市永善县",
    magnitude: 3.0,
    origin_time: "2025-07-14 22:28:40",
    depth: 10.0,
  },
  {
    id: 17313,
    location: "新疆阿克苏地区库车市",
    magnitude: 3.0,
    origin_time: "2025-07-12 12:00:28",
    depth: 10.0,
  },
  {
    id: 17312,
    location: "新疆阿克苏地区沙雅县",
    magnitude: 3.3,
    origin_time: "2025-07-11 06:10:09",
    depth: 19.0,
  },
  {
    id: 17311,
    location: "新疆吐鲁番市托克逊县",
    magnitude: 4.4,
    origin_time: "2025-07-10 02:39:52",
    depth: 20.0,
  },
  {
    id: 17310,
    location: "河北张家口市崇礼区",
    magnitude: 3.4,
    origin_time: "2025-07-09 18:54:03",
    depth: 20.0,
  },
  {
    id: 17309,
    location: "西藏阿里地区日土县",
    magnitude: 3.8,
    origin_time: "2025-07-09 13:25:55",
    depth: 10.0,
  },
  {
    id: 17308,
    location: "新疆阿克苏地区柯坪县",
    magnitude: 3.1,
    origin_time: "2025-07-09 11:29:19",
    depth: 10.0,
  },
  {
    id: 17307,
    location: "辽宁大连市普兰店区",
    magnitude: 3.3,
    origin_time: "2025-07-09 09:12:12",
    depth: 11.0,
  },
  {
    id: 17306,
    location: "新疆乌鲁木齐市乌鲁木齐县",
    magnitude: 3.9,
    origin_time: "2025-07-08 04:47:30",
    depth: 31.0,
  },
  {
    id: 17305,
    location: "台湾花莲县",
    magnitude: 4.0,
    origin_time: "2025-07-08 03:57:05",
    depth: 14.0,
  },
  {
    id: 17304,
    location: "四川凉山州甘洛县",
    magnitude: 3.0,
    origin_time: "2025-07-08 03:45:37",
    depth: 15.0,
  },
  {
    id: 17303,
    location: "台湾宜兰县",
    magnitude: 4.0,
    origin_time: "2025-07-07 20:01:28",
    depth: 60.0,
  },
  {
    id: 17302,
    location: "青海玉树州玉树市",
    magnitude: 3.2,
    origin_time: "2025-07-07 18:39:26",
    depth: 10.0,
  },
  {
    id: 17301,
    location: "西藏那曲市巴青县",
    magnitude: 3.0,
    origin_time: "2025-07-07 03:20:40",
    depth: 10.0,
  },
]);
const tagType=(magnitude)=>{
  if(magnitude<4.0){
    return "primary"
  }else if(magnitude>=4.0&&magnitude<5.0){
    return "warning"
  }else if(magnitude>=5.0){
    return 'danger'
  }
}
</script>

<style scoped>

:deep(.el-table) {
  background-color: transparent !important;
}
:deep(.el-table tr) {
  color: white;
  background-color: transparent !important;
}
:deep(.el-table .cell) {
  color: white;
}
.right-card{
  height: 40% !important;
}
</style>